<template>
  <div class="forgotpassword">
    <Header>
      <a
        href="javascript:;"
        slot="logo"
        class="goback"
        @click="gobackClickHandle"
      >
        <i class="icon-arrow-left-bold"></i>
      </a>
      <span slot="title" class="forgotpassword_header_title">{{
        $t('lang["' + $route.meta.title + '"]')
      }}</span>
    </Header>
    <div class="forgotpassword_main">
      <div class="forgotpassword_main_panel">
        <input
          type="text"
          v-model="userName"
          :placeholder="this.$t('lang.邮箱地址')"
          class="forgotpassword_main_panel_input"
          :class="userNameIsErr ? 'err' : ''"
        />
        <span class="forgotpassword_main_panel_err" v-show="userNameIsErr">{{
          userNameErrMsg
        }}</span>
        <button
          @click="forgotClickHandle"
          class="forgotpassword_main_panel_submit"
          :class="!isSubmit ? 'disabled' : ''"
          :disabled="!isSubmit"
        >
          {{ $t("lang.找回密码") }}
        </button>
      </div>
    </div>
    <Footer></Footer>
    <!--     <FooterNav></FooterNav>
 -->
  </div>
</template>
<script>
export default {
  name: "ForgotPassword",
  components: {
    Header: () =>
      import(/* webpackChunkName: "header" */ "../components/header"),
    Footer: () =>
      import(/* webpackChunkName: "footer" */ "../components/footer"),
  },
  data() {
    return {
      userName: "",
      userNameIsErr: false,
      userNameErrMsg: "",
      isSubmit: false,
    };
  },
  watch: {
    userName(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    userPassword(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    enterUserPassword(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
  },
  methods: {
    boolFormData() {
      let usname = this.userName.replace(/^\s*|\s*$/, "");
      if (usname === "") {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不能为空");
        return false;
      } else if (!/[a-z0-9]+\@[a-z0-9]+\.[a-z]{3,}/.test(usname)) {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不是电子邮箱地址");
        return false;
      } else {
        this.userNameIsErr = false;
        this.userNameErrMsg = "";
      }
      return true;
    },
    forgotClickHandle(e) {
      if (this.boolFormData()) {
        console.log("ok");
        this.$route.params.bounce
          ? (location.href = decodeURIComponent(this.$route.params.bounce))
          : false;
      } else {
        console.log("err");
      }
    },
    gobackClickHandle(e) {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.forgotpassword {
  padding: 0;
  margin: 0;
  .forgotpassword_header_title {
    line-height: 45 / @base;
  }
  .forgotpassword_main {
    margin: 100 / @base 0 0;
    .forgotpassword_main_panel {
      margin: 0 auto;
      width: 300 / @base;
      input {
        &.forgotpassword_main_panel_input {
          display: block;
          margin: 10 / @base auto;
          width: 270 / @base;
          padding: 10 / @base 10 / @base;
          border: 1 / @base solid #ccc;
          border-radius: 5 / @base;
          &.err {
            border: 1 / @base solid red;
          }
        }
      }
      button {
        &.forgotpassword_main_panel_submit {
          display: block;
          width: 290 / @base;
          margin: 20 / @base auto;
          padding: 10 / @base 10 / @base;
          background-color: rgb(165, 42, 42);
          color: #fff;
          font-weight: 700;
          border: 0;
          border-radius: 5 / @base;
          &.disabled {
            background-color: rgba(165, 42, 42, 0.5);
            color: #fff;
          }
        }
      }
      .forgotpassword_main_panel_err {
        display: block;
        color: red;
      }
    }
  }
  .header {
    .header_left {
      a {
        &.goback {
          width: 24 / @base;
          height: 24 / @base;
          display: block;
          margin: 10 / @base 0 10 / @base 10 / @base;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
  }
}
</style>
